<wide-header-page title="{{'Spendable balance' | translate}}" hideBackButton="true">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  <div page-content>
    <ion-list class="bp-list">

      <ion-item *ngIf="coinName == 'XRP' && status.lockedBalanceSat * status.satToUnit >= 20">
        <div class="balance-container">
          <div class="title">
            <img src="assets/img/icon-lock.svg" />
            <div translate>XRP Locked Balance</div>
          </div>
          <div class="balance">
            <span class="locked">
              20 XRP
            </span>
            <div>
              <span class="fiat">
                {{status.lockedBalanceAlternative}} {{status.alternativeIsoCode}}
              </span>
            </div>
          </div>
        </div>
      </ion-item>
      <label-tip type="info" header="no-header" *ngIf="coinName == 'XRP' && status.lockedBalanceSat * status.satToUnit >= 20">
        <div label-tip-body translate>
          The XRP ledger requires that all wallets maintain a minimum balance of 20 XRP. This non-refundable 20 XRP will remain permanently locked in your wallet.
        </div>
      </label-tip>
      
      <label-tip type="warn" header="no-header" class="no-arrowhead">
        <div label-tip-body>
          {{'All of your {coinName} wallet balance may not be available for immediate spending.' | translate: {coinName: coinName} }}
        </div>
      </label-tip>
      <ion-item>
        <div class="balance-container">
          <div class="title">
            <img src="assets/img/icon-sigma.svg" />
            <div translate>Total</div>
          </div>
          <div class="balance">
            <span class="total">
              {{status.totalBalanceStr}}
            </span>
            <div>
              <span class="fiat">
                {{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
              </span>
            </div>
          </div>
        </div>
      </ion-item>
      <label-tip type="info" header="no-header">
        <div label-tip-body>
          {{'The total amount of {coinName} stored in this wallet.' | translate: {coinName: coinName} }}
        </div>
      </label-tip>
      
      <ion-item>
        <div class="balance-container">
          <div class="title">
            <ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
            <div translate>Available</div>
          </div>
          <div class="balance">
            <span class="available">
              {{status.spendableBalanceStr}}
            </span>
            <div>
              <span class="fiat">
                {{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
              </span>
            </div>
          </div>
        </div>
      </ion-item>
      <label-tip type="info" header="no-header">
        <div label-tip-body>
          {{'The amount of {coinName} immediately spendable from this wallet.' | translate: {coinName: coinName} }}
        </div>
      </label-tip>

      <ion-item>
        <div class="balance-container">
          <div class="title">
            <img src="assets/img/icon-confirming-clear.svg" />
            <div translate>Confirming</div>
          </div>
          <div class="balance">
            <span class="confirming">
              {{status.pendingBalanceStr}}
            </span>
            <div>
              <span class="fiat">
                {{status.pendingBalanceAlternative}} {{status.alternativeIsoCode}}
              </span>
            </div>
          </div>
        </div>
      </ion-item>
      <label-tip type="info" header="no-header">
        <div label-tip-body>
          {{'The amount of {coinName} stored in this wallet with less than 1 blockchain confirmation.' | translate: {coinName: coinName} }}
        </div>
      </label-tip>

      <ion-item *ngIf="(coinName == 'XRP' && status.lockedBalanceSat * status.satToUnit >= 20) || coinName != 'XRP'">
        <div class="balance-container">
          <div class="title">
            <img src="assets/img/icon-lock.svg" />
            <div translate>Locked</div>
          </div>
          <div class="balance">
            <span *ngIf="coinName != 'XRP'" class="locked">
              {{status.lockedBalanceStr}}
            </span>
            <span *ngIf="coinName == 'XRP'" class="locked">
              {{status.lockedBalanceSat * status.satToUnit - 20}}
            </span>
            <div>
              <span class="fiat">
                {{status.lockedBalanceAlternative}} {{status.alternativeIsoCode}}
              </span>
            </div>
          </div>
        </div>
      </ion-item>
      <label-tip type="info" header="no-header" *ngIf="(coinName == 'XRP' && status.lockedBalanceSat * status.satToUnit >= 20) || coinName != 'XRP'">
        <div label-tip-body>
          {{'The amount of {coinName} stored in this wallet that is allocated as inputs to your pending transaction proposals. The amount is determined using unspent transaction outputs associated with this wallet and may be more than the actual amounts associated with your pending transaction proposals.' | translate: {coinName: coinName} }}
        </div>
      </label-tip>

    </ion-list>
  </div>
</wide-header-page>